 <!--
 * @Author: zeng_ze
 * @Date: 2020-1-2
 * @Description: 系统管理 -> 定时任务 -> 任务管理
 -->
<template>
  <div>
    <fks-query-page
      v-loading="loading"
      :data="tableData"
      :total="total"
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[20, 50, 100]"
      :element-loading-text="LANG.LOADING"
      :table-name="LANG.TASKMANAGEMENT_TASKLIST"
      @clear="clear"
      @query="getData"
    >
      <template slot="search">
        <fks-search-item :label="LANG.TASKMANAGEMENT_ACTUATOR">
          <fks-select
            v-model="jobGroup"
            clearable
          >
            <!-- <fks-option label="队列执行器" :value="1"></fks-option> -->
            <fks-option
              v-for="item in jobGroupList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </fks-select>
        </fks-search-item>
        <fks-search-item :label="LANG.STATUS">
          <fks-select
            v-model="triggerStatus"
            clearable
          >
            <fks-option
              :label="LANG.TASKMANAGEMENT_STOP"
              :value="0"
            />
            <fks-option
              :label="LANG.TASKMANAGEMENT_RUNNING"
              :value="1"
            />
          </fks-select>
        </fks-search-item>
        <fks-search-item :label="LANG.TASKMANAGEMENT_JOBDESC">
          <fks-input
            v-model="jobDesc"
            maxlength="50"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
        <fks-search-item :label="LANG.TASKMANAGEMENT_AUTHOR">
          <fks-input
            v-model="author"
            maxlength="50"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
      </template>
      <template slot="button">
        <fks-button
          icon="fks-icon-plus"
          type="primary"
          @click="addTask"
        >
          {{ LANG.ADD }}
        </fks-button>
      </template>
      <template>
        <fks-table-column
          type="index"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </fks-table-column>
        <!-- <fks-table-column prop="id" :label="LANG.TASKMANAGEMENT_TASKID" /> -->
        <fks-table-column
          prop="jobDesc"
          :label="LANG.TASKMANAGEMENT_JOBDESC"
          min-width="300"
          align="left"
        />
        <fks-table-column
          prop="jobCron"
          label="Cron"
          min-width="120"
        />
        <fks-table-column
          prop="author"
          :label="LANG.TASKMANAGEMENT_AUTHOR"
        />
        <fks-table-column
          prop="triggerStatus"
          :label="LANG.STATUS"
        >
          <!-- 状态判断 -->
          <template slot-scope="scope">
            <fks-tag
              v-if="scope.row.triggerStatus == 0"
              type="danger"
            >
              {{ LANG.TASKMANAGEMENT_STOP }}
            </fks-tag>
            <fks-tag
              v-if="scope.row.triggerStatus == 1"
              type="success"
            >
              {{ LANG.TASKMANAGEMENT_RUNNING }}
            </fks-tag>
          </template>
        </fks-table-column>
        <fks-table-column
          :label="LANG.OPERATION"
          width="150"
          align="left"
        >
          <template slot-scope="scope">
            <fks-button
              type="text"
              @click="editHandle(scope.row)"
            >
              {{ LANG.EDIT }}
            </fks-button>
            <fks-button
              v-if="scope.row.triggerStatus == 1"
              danger-text
              style="margin-right: 16px"
              @click.native="stopHandle(scope.row)"
            >
              {{ LANG.TASKMANAGEMENT_STOP }}
            </fks-button>
            <fks-button
              v-if="scope.row.triggerStatus == 0"
              text
              style="margin-right: 16px"
              @click.native="startHandle(scope.row)"
            >
              {{ LANG.TASKMANAGEMENT_RUN }}
            </fks-button>
            <fks-dropdown trigger="click">
              <fks-button
                icon="fks-icon-more"
                type="text"
                min-width="28px"
                class="more"
              />
              <fks-dropdown-menu slot="dropdown">
                <fks-dropdown-item @click.native="triggerHandle(scope.row)">
                  {{ LANG.TASKMANAGEMENT_TRIGGER }}
                </fks-dropdown-item>
                <fks-dropdown-item @click.native="deleteHandle(scope.row)">
                  <span style="color: #ff4d4f">{{ LANG.DELETE }}</span>
                </fks-dropdown-item>
              </fks-dropdown-menu>
            </fks-dropdown>
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
    <!-- 新增任务&&编辑任务 同一个表单 -->
    <fks-dialog
      :visible.sync="addEditVisible"
      :append-to-body="true"
      width="960px"
      destroy-on-close
      :title="title"
    >
      <div slot="title">
        <i
          v-if="title == LANG.ADD"
          class="fks-icon-plus"
        />
        <i
          v-if="title == LANG.EDIT"
          class="fks-icon-edit"
        />
        {{ title }}
      </div>
      <fks-form
        ref="Form"
        :model="Form"
        :rules="rules"
        status-icon
        label-width="130px"
      >
        <fks-form-item
          :span="24"
          :label="LANG.TASKMANAGEMENT_JOBDESC"
          prop="jobDesc"
        >
          <fks-input
            v-model="Form.jobDesc"
            maxlength="255"
            show-word-limit
          />
          <!-- <fks-input type="textarea" :row="2" v-model="Form.jobDesc" maxlength="100" show-word-limit></fks-input> -->
        </fks-form-item>
        <fks-form-item
          :span="12"
          lead
          :label="LANG.TASKMANAGEMENT_ACTUATOR"
          prop="jobGroup"
        >
          <fks-select
            v-model="Form.jobGroup"
            style="width: 100%"
          >
            <!-- <fks-select v-model="Form.jobGroup" style="width:100%;" @change="change(Form.jobGroup)"> -->
            <!-- <fks-option label="队列执行器" :value="1"></fks-option> -->
            <fks-option
              v-for="item in jobGroupList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </fks-select>
        </fks-form-item>
        <fks-form-item
          :span="12"
          label="JobHandler"
          prop="executorHandler"
        >
          <fks-input
            v-model="Form.executorHandler"
            maxlength="50"
            disabled
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.EXECUTORTIMEOUT"
          prop="executorTimeout"
        >
          <fks-input
            v-model="Form.executorTimeout"
            maxlength="10"
            oninput="value=value.replace(/\D/g,'')"
          >
            <template slot="append">
              {{ LANG.SECOND }}
            </template>
          </fks-input>
        </fks-form-item>
        <fks-form-item
          :span="12"
          :label="LANG.EXECUTORFAILRETRYCOUNT"
          prop="executorFailRetryCount"
        >
          <fks-input-number
            v-model="Form.executorFailRetryCount"
            maxlength="10"
            style="width: 100%"
            controls-position="right"
            oninput="value=value.replace(/\D/g,'')"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          lead
          :label="LANG.TASKMANAGEMENT_AUTHOR"
          prop="author"
        >
          <fks-user-selector
            style="width: 100%"
            url
            :username.sync="Form.username"
            :userfullname.sync="Form.author"
          />
        </fks-form-item>
        <fks-form-item
          :span="12"
          label="Cron"
          prop="jobCron"
        >
          <fks-input
            v-model="Form.jobCron"
            maxlength="50"
          />
        </fks-form-item>
        <fks-form-item
          v-if="title == LANG.ADD"
          :span="24"
        >
          <div class="remark">
            <span>{{ LANG.TASKMANAGEMENT_CRONEXAMPLE }}</span>
            <br>0 0 8 25 1-12 ?（
            <span>{{ LANG.TASKMANAGEMENT_CRONEXAMPLE1 }}</span>） <br>0 0 6 * * ?（
            <span>{{ LANG.TASKMANAGEMENT_CRONEXAMPLE2 }}</span>）
          </div>
        </fks-form-item>
        <fks-form-item
          :span="24"
          :label="LANG.TASKMANAGEMENT_EXECUTORPARAMS"
          prop="executorParam"
        >
          <fks-input
            v-model="Form.executorParam"
            maxlength="255"
            show-word-limit
          />
        </fks-form-item>
        <fks-form-item
          v-if="title == LANG.ADD"
          :span="24"
        >
          <div class="remark">
            <span>{{ LANG.TASKMANAGEMENT_EXECUTORPARAMSEXAMPLE }}</span>：imcp-sys-user-task-queue-sync-org
          </div>
        </fks-form-item>
      </fks-form>
      <template slot="footer">
        <fks-button
          type="primary"
          class="fks-icon-check"
          @click="save"
        >
          {{ LANG.SAVE }}
        </fks-button>
      </template>
    </fks-dialog>
  </div>
</template>
 
<script>
import * as Timedtask from '../api'
import { ENUM } from '@/store/State/stateTypes'
export default {
  name: 'TaskManagement',
  components: {},
  data() {
    return {
      //执行器
      jobGroup: '',
      jobGroupList: [],
      //状态
      triggerStatus: '',
      //任务描述
      jobDesc: '',
      //负责人
      author: '',
      currentPage: 1,
      total: 0,
      pageSize: 20,
      loading: false,
      addEditVisible: false,
      title: '',
      //新增&&编辑任务 表单
      Form: {
        jobGroup: '',
        jobDesc: '',
        jobCron: '',
        author: '',
        executorParam: '',
        executorTimeout: 0,
        executorFailRetryCount: 0,
        executorHandler: 'queueJobHandler',
        username: ''
      },
      tableData: []
    }
  },
  computed: {
    //验证规则
    rules() {
      return {
        jobGroup: [
          {
            required: true,
            message: this.LANG.TASKMANAGEMENT_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        author: [
          {
            required: true,
            message: this.LANG.TASKMANAGEMENT_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        jobCron: [
          {
            required: true,
            message: this.LANG.TASKMANAGEMENT_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        executorTimeout: [
          {
            required: true,
            message: this.LANG.TASKMANAGEMENT_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        executorFailRetryCount: [
          {
            required: true,
            message: this.LANG.TASKMANAGEMENT_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        jobDesc: [
          {
            required: true,
            message: this.LANG.TASKMANAGEMENT_NOT_EMPTY,
            trigger: 'blur'
          }
        ]
      }
    },
    selectGlueTypes() {
      return this.$store.state[ENUM].glueType
    },
    selectBlockTypes() {
      return this.$store.state[ENUM].executorBlockStrategy
    },
    selectRouteTypes() {
      return this.$store.state[ENUM].executorRouteStrategy
    }
  },
  mounted() {
    this.getData()
    //获取枚举
    //获取执行器列表
    this.getJobGroupList()
  },
  methods: {
    //搜索栏清空
    clear() {
      this.jobGroup = ''
      this.triggerStatus = ''
      this.jobDesc = ''
      this.author = ''
      this.currentPage = 1
      this.getData()
    },
    //获得任务分页列表
    @permission('job:query')
    getData() {
      this.loading = true
      Timedtask.getTasks(
        this.author,
        this.jobGroup,
        this.jobDesc,
        this.Form.executorHandler,
        this.pageSize,
        this.currentPage - 1,
        this.triggerStatus
      )
        .then((res) => {
          if (res.status) {
            this.tableData = res.data.list
            this.total = res.data.total
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.tableData = []
          this.total = 0
        })
    },
    //add task
    addTask() {
      this.title = this.LANG.ADD
      this.Form = {
        jobGroup: '',
        jobDesc: '',
        jobCron: '',
        author: '',
        executorParam: '',
        executorTimeout: '',
        executorFailRetryCount: '',
        executorHandler: 'queueJobHandler',
        username: ''
      }
      this.addEditVisible = true
      //this.$refs.Form.resetFields()
    },
    //新增&&编辑任务--保存
    save() {
      if (this.title == this.LANG.ADD) {
        //console.log(this.Form)
        this.$refs.Form.validate((valid) => {
          if (valid) {
            Timedtask.addTasks(JSON.stringify(this.Form))
              .then((res) => {
                if (res.status) {
                  this.$message.success(this.LANG.SUCCESS)
                  this.addEditVisible = false
                  this.getData()
                }
              })
              .catch(() => {})
            //console.log(this.Form)
          } else {
            this.$message.error(this.LANG.TASKMANAGEMENT_ERROR)
          }
        })
      } else {
        //编辑任务
        this.$refs.Form.validate((valid) => {
          if (valid) {
            Timedtask.editTasks(JSON.stringify(this.Form))
              .then((res) => {
                if (res.status) {
                  this.$message.success(this.LANG.SUCCESS)
                  this.addEditVisible = false
                  this.getData()
                }
              })
              .catch(() => {})
            //console.log(this.Form)
          } else {
            this.$message.error(this.LANG.TASKMANAGEMENT_ERROR)
          }
        })
      }
    },
    //新增&&编辑任务--取消
    cancel() {
      this.addEditVisible = false
    },
    /**
     * @description: 任务执行一次
     * @param {executorParam,id} 执行参数，id
     */
    triggerHandle(row) {
      Timedtask.triggerTasks(row.executorParam, row.id)
        .then((res) => {
          if (res.status) {
            this.$message.success(this.LANG.SUCCESS)
          }
        })
        .catch(() => {})
    },
    //任务操作--删除
    deleteHandle(row) {
      this.$confirm(this.LANG.DELETE + '"' + row.id + '"？', {
        title: this.LANG.TIPS,
        type: 'warning',
        confirmButtonText: this.LANG.CONFIRM,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger'
      })
        .then(() => {
          Timedtask.deleteTasks(row.id)
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.SUCCESS)
                this.getData()
              }
            })
            .catch(() => {})
        })
        .catch(() => {})
    },
    //任务操作--编辑
    editHandle(row) {
      this.title = this.LANG.EDIT
      this.Form = JSON.parse(JSON.stringify(row))
      this.addEditVisible = true
      //console.log(row)
    },
    //任务操作--停止
    stopHandle(row) {
      Timedtask.stopTasks(row.id)
        .then((res) => {
          if (res.status) {
            this.$message.success(this.LANG.SUCCESS)
            this.getData()
          }
        })
        .catch(() => {})
    },
    //任务操作--启动
    startHandle(row) {
      Timedtask.startTasks(row.id)
        .then((res) => {
          if (res.status) {
            this.$message.success(this.LANG.SUCCESS)
            this.getData()
          }
        })
        .catch(() => {})
    },
    //获取执行器列表
    getJobGroupList() {
      Timedtask.infoTasks()
        .then((res) => {
          if (res.status) {
            this.jobGroupList = res.data.JobGroupList
          }
        })
        .catch(() => {
          this.jobGroupList = []
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.fks-dropdown-link {
  color: #377ced;
  cursor: pointer;
}
.fks-input-number ::v-deep .fks-input__inner {
  text-align: left;
}
.remark {
  width: 100%;
  padding-left: 10px;
  border: 1px solid rgba(231, 239, 250, 1);
  border-left: 4px solid var(--theme-color);
  border-radius: 4px;
  color: #606266;
  background: rgba(247, 250, 255, 1);
}
</style>